<template>
  <div id="accountlog">
    <div class="accountlog-panel">
      <van-cell-group>
        <van-field
          v-model="userobj.account"
          :error-message="error.accounterr"
          placeholder="请输入手机号码/用户名"
          @blur="getaccount"
          @focus="error.accounterr = ''"
        />
        <van-field
          v-model="userobj.password"
          :error-message="error.passworderr"
          placeholder="请输入密码"
          :type="typefield.type"
          maxlength="14"
          :right-icon="typefield.icon"
          @click-right-icon="updateicon"
          @blur="getpwd"
          @focus="error.passworderr = ''"
        />
      </van-cell-group>
      <Protocol @getcheck="getcheck" />
      <LoginBtn :state="state" :userobj="userobj" />
      <div class="tablog">
        <span @click="goSms">验证码登录</span>
        <span>找回密码</span>
      </div>
    </div>
  </div>
</template>

<script>
import Protocol from "@/components/login/Protocol.vue";
import LoginBtn from "@/components/login/LoginBtn.vue";
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const typefield = reactive({
      type: "password",
      icon: "closed-eye",
    });
    // 验证错误信息
    const error = reactive({
      accounterr: "",
      passworderr: "",
    });
    //判断两个输入框都有满足验证，则开放按钮
    const flag = reactive({
      flag1: false,
      flag2: false,
    });
    //输入框数据绑定
    const userobj = reactive({
      account: "",
      password: "",
    });
    //传个子组件的值
    const state = reactive({
      title: "登录",
      color: "#9DCDFE",
      flag: true,
      check: null,
    });
    const updateicon = () => {
      typefield.type = typefield.type == "password" ? "text" : "password";
      typefield.icon = typefield.icon == "closed-eye" ? "eye-o" : "closed-eye";
    };
    //获取子组件复选框是否选中的值
    const getcheck = (val) => {
      state.check = val;
    };
    //跳转短信验证码登录
    const goSms = () => {
      router.replace("/login");
    };
    //账号验证
    const getaccount = () => {
      if (!userobj.account) {
        error.accounterr = "请输入账号";
        flag.flag1 = false;
      } else {
        flag.flag1 = true;
        showbtn();
      }
    };
    //密码验证
    const getpwd = () => {
      if (!userobj.password) {
        error.passworderr = "请输入密码";
        flag.flag2 = false;
      } else {
        if (userobj.password.length < 6) {
          error.passworderr = "请输入6位及以上的密码,最大长度为14";
          flag.flag2 = false;
          showbtn();
        } else {
          flag.flag2 = true;
          showbtn();
        }
      }
    };
    //登录按钮开放验证
    const showbtn = () => {
      if (flag.flag2 && flag.flag1) {
        state.flag = false;
        state.color = "blue";
      } else {
        state.flag = true;
        state.color = "#9DCDFE";
      }
    };
    return {
      userobj,
      showbtn,
      error,
      typefield,
      state,
      flag,
      goSms,
      updateicon,
      getpwd,
      getaccount,
      getcheck,
    };
  },

  components: { Protocol, LoginBtn },
};
</script>
<style lang="less">
#accountlog {
  .accountlog-panel {
    padding-top: 20px;
    .van-cell-group {
      margin: 0;
      .van-cell {
        padding-left: 0;
      }
    }
    .tablog {
      padding-top: 15px;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 12px;
        color: #3f95d7;
      }
    }
  }
}
</style>
